<template>
  <div>
<!-- 闪光语录头部搜索 -->
<div class="shan-sousuotop">
    <input type="text" placeholder="搜索更多语录">
    <img class="sousuo" src="img/sousuo.jpg" alt="">
    <span class="pifu">闪光语录</span>
</div>
    

<!-- 引入轮播图 -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img class="lunbo" src="img/shan-lunbo1.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img class="lunbo" src="img/shan-lunbo2.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img class="lunbo" src="img/shan-lunbo3.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img class="lunbo" src="img/shan-lunbo4.jpg" alt=""></van-swipe-item>
</van-swipe>


<!-- 闪光语录二级导航栏 引入组件-->
<Shannav/>
     
     
    <Bottomfu/>
  </div>
</template>

<script>
import Bottomfu from "@/components/bottom/fu.vue"
import Shannav from "@/components/shannav/zi.vue"

export default {
  components:{
    Bottomfu,Shannav
  }
}
</script>
<style scoped>
.shan-sousuotop{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: sticky;
    top: 0;
    z-index:11;
    background-color: white;
}
input{
    height: 0.32rem;
    width: 2.63rem;
    border-radius: 0.1rem;
    border:0.01rem solid gray;
    text-indent: 0.4rem;
    outline: none;
}
.pifu{
    font-size: 0.14rem;
}
.sousuo{
    width: 0.2rem;
    height: 0.2rem;
    position: absolute;
    left: 0.23rem;
    transform: translateY(0%);
}

/* 轮播图 */
.my-swipe .van-swipe-item {
   
    height:1.3rem;
    box-sizing: border-box;
    padding:0 0.15rem;
  }
  .lunbo{
    width: 3.33rem;
    height: 1.12rem;
  }

  
</style>

